<template>
    <div class="message-view">
        <van-empty v-if="messageList.length === 0" description="暂无消息" />
        <van-cell-group v-else>
            <van-cell v-for="(item, index) in messageList"
                :key="index"
                :icon="item.icon"
                :title="item.title"
                :value="item.date"
                :label="item.label"
                center
                @click="handleMessageClick(item)"
            />
        </van-cell-group>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const messageList = ref([
    {
        icon: '/images/avatar1.jpg',
        title: '精品水果店',
        date: '一分钟前',
        label: '你好，有什么可以帮到你的吗？'
    },
    {
        icon: '/images/avatar2.jpg',
        title: '水果专卖店',
        date: '两分钟前',
        label: '你好，请检查你的订单信息。'
    },
    {
        icon: '/images/avatar3.png',
        title: '订阅号',
        date: '星期二',
        label: '你关注的商品有优惠。'
    },
    {
        icon: '/images/avatar4.png',
        title: '通知',
        date: '星期一',
        label: '欢迎使用移动商城！'
    },
]);

const handleMessageClick = (message) => {
    router.push({
        path: '/chat',
        query: { 
            shopId: message.title,
            icon: message.icon
        }
    });
};
</script>

<style lang="scss" scoped>
.message-view {
    min-height: 100vh;
    background: #f8f8f8;
}

:deep(.van-cell) {
    .van-cell__left-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border-radius: 50%;
        overflow: hidden;
        
        .van-icon__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    &:active {
        background-color: #f2f3f5;
    }
}
</style>